<template>
	<view class="page">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<view class="search-input">
				<image src="/static/icons/search.svg" class="search-icon"/>
				<text class="search-placeholder">输入商家名、品类或商圈</text>
			</view>
			<view class="header-right">
				<image src="/static/icons/message.svg" class="header-icon"/>
				<image src="/static/icons/scan.svg" class="header-icon"/>
			</view>
		</view>

		<!-- 顶部导航 -->
		<view class="nav-tabs">
			<view 
				class="nav-tab" 
				:class="{'active': currentTab === index}"
				v-for="(tab, index) in ['外卖外送', '外卖外送']" 
				:key="index"
				@click="handleTabClick(index)"
			>
				{{ tab }}
			</view>
		</view>
		
		<category-nav @category-click="handleCategoryChange"/>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { usePage } from '/common/page';
	import CategoryNav from '@/components/CategoryNav.vue';

	const currentTab = ref(0);

	const searchObject = ref({
		no: 1,
		size: 20,
		sortField: "id",
		sortMethod: "desc",
		orderType: "pay",
		category: ''
	});
	
	const {
		pageData,
		status,
		totalPage,
		initData,
		total,
		loadMore
	} = usePage("/order/search", searchObject)
	
	const handleTabClick = (index) => {
		currentTab.value = index;
	}

	const handleCategoryChange = (category) => {
		console.log('选择的分类:', category);
		searchObject.value.category = category.id;
		initData();
	}
	
	const search = (e) => {
		console.log('搜索关键词:', e);
		searchObject.value.keyword = e;
		initData();
	}
</script>

<style>
	.page {
		background-color: #f8f8f8;
		min-height: 100vh;
	}
	
	.search-bar {
		background-color: #fff;
		padding: 16rpx 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: sticky;
		top: 0;
		z-index: 100;
	}

	.search-input {
		flex: 1;
		height: 64rpx;
		background-color: #f8f8f8;
		border-radius: 32rpx;
		display: flex;
		align-items: center;
		padding: 0 24rpx;
		margin-right: 24rpx;
	}

	.search-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 12rpx;
	}

	.search-placeholder {
		font-size: 28rpx;
		color: #999;
	}

	.header-right {
		display: flex;
		align-items: center;
	}

	.header-icon {
		width: 44rpx;
		height: 44rpx;
		margin-left: 24rpx;
	}

	.nav-tabs {
		display: flex;
		background-color: #fff;
		padding: 0 32rpx;
		height: 88rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.nav-tab {
		padding: 0 32rpx;
		font-size: 32rpx;
		color: #666;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.nav-tab.active {
		color: #333;
		font-weight: 500;
	}

	.nav-tab.active::after {
		content: '';
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		width: 32rpx;
		height: 4rpx;
		background-color: #FF4444;
		border-radius: 2rpx;
	}

	.item {
		display: flex;
		justify-content: space-between;
	}

	.card {
		width: 95vw;
		margin: 20rpx auto;
	}
</style>
